<template>
  <div class="title">
    <span>
      编号：
      <input type="text" v-model="id" />
    </span>
    <span>
      品牌名称：
      <input type="text" v-model="brand" />
    </span>
    <button class="ad" @click="Append">添加</button>
    <br />
    <span>
      产品图片地址：
      <input type="text" v-model="src" />
    </span>
    <span>
      价格：
      <input type="text" v-model="price" />
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      code: "",
      src: "",
      brand: "",
      price: "",
    };
  },
  methods: {
    Append() {
      this.arr.push({
        id: this.id,
        code: this.code,
        src: this.src,
        brand: this.brand,
        price: this.price,
        number: this.number,
        check: false,
      });
      this.newArr = this.arr.filter((item) => {
        return item.brand.includes(this.keyWord) != false;
      });
    },
  },
};
</script>

<style>
.title {
  width: 700px;
  height: 70px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 3px;
  margin-top: 10px;
}
.title span {
  margin: 30px;
  line-height: 30px;
}
.title .ad {
  margin: 6px 76px;
  width: 70px;
  height: 50px;
  position: absolute;
}
</style>
